<!-- 首页 -->
<template>
  <div class="home">
    <el-carousel
      class="first-el-carousel"
      indicator-position="none"
      :height="width <= 768 ? '22rem' : '11rem'"
      @change="change"
      :interval="5000"
    >
      <el-carousel-item
        class="first-el-carousel-item"
        v-for="(val, ins) in data.index_back"
        :key="ins"
      >
        <div class="first-item">
          <img :src="val" />
          <p :class="{ p_gradual: ins == index }">
            {{ data.index_txts[ins] }}
          </p>
        </div>
      </el-carousel-item>
    </el-carousel>
    <p :class="['headline', 'Domlist', { Cartoon: Dom[0].flag }]">
      {{ i18n.navigation.About }}<span></span>
    </p>
    <div :class="['aboutUs', 'Domlist', { Cartoon: Dom[1].flag }]">
      <h3>{{ data.about_title }}</h3>
      <p>{{ data.about_content }}</p>
      <div>
        <p v-for="(val, ins) in data.about_image" :key="ins">
          <img :src="val" />
        </p>
      </div>
      <button @click="$method.skip('/aboutUs')">{{ i18n.home.more }}></button>
    </div>
    <div :class="['promise', 'Domlist', { Cartoon: Dom[2].flag }]">
      <h3>{{ i18n.home.promise }}</h3>
      <div>
        <main>
          <p>
            <span class="three"
              ><img :src="require('@/assets/home/10.png')"
            /></span>
            <i>{{ i18n.home.promise1 }}</i>
          </p>
          <p>
            <span class="two"
              ><img :src="require('@/assets/home/11.png')"
            /></span>
            <i>{{ i18n.home.promise2 }}</i>
          </p>
          <p>
            <span><img :src="require('@/assets/home/12.png')" /></span>
            <i>{{ i18n.home.promise3 }}</i>
          </p>
          <p>
            <span class="two"
              ><img :src="require('@/assets/home/13.png')"
            /></span>
            <i>{{ i18n.home.promise4 }}</i>
          </p>
          <p>
            <span class="three"
              ><img :src="require('@/assets/home/14.png')"
            /></span>
            <i>{{ i18n.home.promise5 }}</i>
          </p>
        </main>
      </div>
    </div>
    <p :class="['headline', 'Domlist', { Cartoon: Dom[3].flag }]">
      {{ i18n.navigation.product }}<span></span>
    </p>
    <div :class="['product', 'Domlist', { Cartoon: Dom[4].flag }]">
      <main>
        <div v-for="val in data.product" @click="$method.skip('/product_detail?id='+val.id)" :key="val.id">
          <span>
            <img :src="val.image" />
          </span>
          <p>
            {{ val.title }}
          </p>
        </div>
      </main>
      <button @click="$method.skip('/product')">{{ i18n.home.more }}></button>
    </div>
    <div :class="['service', 'Domlist', { Cartoon: Dom[5].flag }]">
      <h3>{{ i18n.home.services }}</h3>
      <main>
        <div>
          <span>
            <img :src="require('@/assets/home/22.png')" />
          </span>
          <p>
            <span>{{ i18n.home.services1 }}</span>
            {{ i18n.home.services2 }}
          </p>
        </div>
        <div>
          <span>
            <img :src="require('@/assets/home/23.png')" />
          </span>
          <p>
            <span>{{ i18n.home.services3 }}</span>
            {{ i18n.home.services4 }}
          </p>
        </div>
        <div>
          <span>
            <img :src="require('@/assets/home/24.png')" />
          </span>
          <p>
            <span>{{ i18n.home.services5 }}</span>
            {{ i18n.home.services6 }}
          </p>
        </div>
      </main>
    </div>
    <p :class="['headline', 'Domlist', { Cartoon: Dom[6].flag }]">
      {{ i18n.navigation.innovate }}<span></span>
    </p>
    <div :class="['innovate', 'Domlist', { Cartoon: Dom[7].flag }]">
      <main>
        <article>
          <div>
            <p v-for="(val, ins) in data.module" :key="val.id">
              <img :src="require('@/assets/home/' + (ins + 1) + '.png')" />
              <span>
                <b>{{ val.title }}</b>
                <i>{{ val.content }}</i>
              </span>
            </p>
          </div>
          <p v-if="width > 768">
            <span>
              <img :src="data.module[0].img" />
            </span>
            <b>{{ i18n.home.tutorship }}</b>
            <i></i>
          </p>
        </article>
      </main>
      <button @click="$method.skip('/innovate')">{{ i18n.home.more }}></button>
    </div>
    <p :class="['headline', 'Domlist', { Cartoon: Dom[8].flag }]">
      {{ i18n.home.college }}<span></span>
    </p>
    <div :class="['college', 'Domlist', { Cartoon: Dom[9].flag }]">
      <el-carousel
        :height="width <= 768 ? '20rem' : '8rem'"
        arrow="always"
        indicator-position="none"
        @change="college"
        :autoplay="false"
        class="college-swiper"
      >
        <el-carousel-item
          class="college-swiper-item"
          v-for="val in data.business"
          :key="val.id"
        >
          <div class="carousel-item">
            <img :src="val.image" />
          </div>
        </el-carousel-item>
      </el-carousel>
      <p
        :style="
          'width:' + (width <= 768 ? 2 : 0.5) * data.business.length + 'rem;'
        "
      >
        <span
          :style="'left: ' + (100 / data.business.length) * coll + '%;'"
        ></span>
      </p>
      <button @click="$method.skip('/college')">{{ i18n.home.more }}></button>
    </div>
    <p :class="['headline', 'Domlist', { Cartoon: Dom[10].flag }]">
      {{ i18n.home.journalism }}<span></span>
    </p>
    <div :class="['journalism', 'Domlist', { Cartoon: Dom[11].flag }]">
      <main>
        <div v-for="val in data.news" @click="$method.skip('/journalism_detail?id='+val.id)" :key="val.id">
          <p>
            <i></i>
            <span>{{ val.title }}</span>
          </p>
          <span>{{ val.create_time }}</span>
        </div>
      </main>
      <button @click="$method.skip('/journalism')">
        {{ i18n.home.more }}>
      </button>
    </div>
    <p :class="['headline', 'Domlist', { Cartoon: Dom[12].flag }]">
      {{ i18n.home.qualification }}<span></span>
    </p>
    <div :class="['qualification', 'Domlist', { Cartoon: Dom[13].flag }]">
      <img
        v-if="carousel.prev"
        @click="carousel.prev"
        :src="require('@/assets/home/5.png')"
      />
      <div>
        <el-carousel
          ref="carousel"
          class="qualification-swiper"
          arrow="never"
          indicator-position="none"
          :interval="5000"
          type="card"
          height="3.125rem"
        >
          <el-carousel-item
            class="qualification-swiper-item"
            v-for="(val, ins) in data.index_glory"
            :key="ins"
          >
            <div class="qualification-swiper-img">
              <img :src="val" />
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <img
        v-if="carousel.next"
        @click="carousel.next"
        :src="require('@/assets/home/6.png')"
      />
    </div>
  </div>
</template>

<script>
import bus from "@/config/emit";

export default {
  name: "home",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      coll: 0,
      index: 0,
      carousel: {},
      banner: [1, 2, 3, 4],
      Dom: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      data: {
        business: [],
        module: [{}],
      },
    };
  },
  props: ["width"],
  //计算属性 类似于data概念
  computed: {
    i18n() {
      return this.$t("message");
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getIndex() {
      this.$getRequest("/index/getIndex").then((res) => {
        res.data.about_image.splice(3);
        this.data = res.data;
      });
    },
    college(index) {
      this.coll = index;
    },
    change(index) {
      this.index = index;
    },
    scroll() {
      const scrollPos =
        window.scrollY ||
        window.scrollTop ||
        document.getElementsByTagName("html")[0].scrollTop;
      this.Dom.forEach((value, index) => {
        if (value.top < scrollPos + innerHeight - 200) {
          this.Dom[index].flag = true;
          this.Dom[index].dom = true;
        } else {
          this.Dom[index].dom = false;
        }
      });
    },
    Dompush() {
      this.Dom = [];
      let list = [...document.getElementsByClassName("Domlist")];
      list.forEach((value) => {
        this.Dom.push({
          flag: false,
          dom: false,
          top: value.offsetTop,
        });
      });
      this.scroll();
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getIndex();
    bus.$on("lang", () => {
      if (this.$route.name == "/home") {
        this.getIndex();
      }
    });
  },
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.Dompush();
    window.addEventListener("scroll", () => {
      this.scroll();
    });
    window.addEventListener("resize", () => {
      this.Dompush();
    });
    this.carousel = this.$refs.carousel;
  },
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {
    this.getIndex();
  }, //如果页面有keep-alive缓存功能，激活
  deactivated() {}, //如果页面有keep-alive缓存功能，非激活
};
</script>
<style lang="less">
@keyframes gradual {
  0% {
    transform: translate(-50%, -50%) rotateX(90deg);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes entrance {
  0% {
    transform: translateY(150%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.home {
  .Domlist {
    opacity: 0;

    & > h3 {
      font-size: 0.3125rem;
      text-align: center;
      margin-bottom: 0.5625rem;
    }

    & > button {
      width: 1.875rem;
      height: 0.625rem;
      border-radius: 0.3125rem;
      background: #dfdfdf;
      font-size: 0.25rem;
      margin: 0 auto;
      color: #999999;
      display: block;
    }
  }

  .Cartoon {
    animation: entrance 1s linear;
    animation-fill-mode: forwards;
  }

  & > .qualification {
    width: 17.5rem;
    margin: 0 auto 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & > img {
      width: 2rem;
    }

    & > div {
      width: 8.875rem;
    }

    .qualification-swiper-img {
      width: 100%;
      height: 100%;
      position: relative;

      & > img {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .qualification-swiper,
    .qualification-swiper-item,
    .qualification-swiper-img {
      height: 3.125rem;
    }
  }

  & > .journalism {
    width: 17.5rem;
    margin: 0 auto;

    & > main {
      width: 100%;
      font-size: 0.3125rem;
      margin-bottom: 0.875rem;

      & > div:hover {
        box-shadow: 0px 0px 20px 0px #33333330;
      }
      & > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.25rem;

        & > p {
          display: flex;
          align-items: center;

          & > span {
            width: 8rem;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box !important;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          & > i {
            width: 0.3rem;
            height: 0.3rem;
            background-color: #223ad6;
            margin-right: 0.1875rem;
          }
        }
      }
    }
  }

  & > .college {
    & > p {
      height: 0.1875rem;
      border-radius: 0.1875rem;
      background: #eaeaea;
      position: relative;
      margin: 0.5rem auto 0.25rem;

      & > span {
        width: 0.5rem;
        height: 100%;
        border-radius: 0.1875rem;
        background-color: #223ad6;
        position: absolute;
        transition: all 0.3s;
      }
    }

    .college-swiper {
      margin: 0 auto;
    }

    .is-active {
      button {
        background-color: #223ad6;
      }
    }

    .college-video,
    .college-swiper,
    .college-swiper-item,
    .carousel-item {
      width: 13.25rem;
      height: 8rem;
      background-color: #000;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  & > .innovate {
    width: 100%;

    & > main {
      width: 100%;
      height: 9.9375rem;
      background: url("../assets/home/21.png") no-repeat 50% 50%;
      background-size: 100% 100%;
      margin-bottom: 0.875rem;

      & > article {
        width: 17.5rem;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;

        & > div {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-right: 0.5375rem;

          & > p:nth-child(1) {
            margin-top: 0rem;
          }

          & > p {
            display: flex;
            align-items: center;
            margin-top: 0.8rem;

            & > span {
              display: flex;
              flex-direction: column;
              font-size: 0.25rem;
              color: #666666;

              & > i {
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box !important;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              }

              & > b {
                font-size: 0.3125rem;
                margin-bottom: 0.125rem;
              }
            }

            & > img {
              width: 1.5rem;
              margin-right: 0.425rem;
            }
          }
        }

        & > p:hover {
          & > span {
            & > img {
              transform: translate(-50%, -50%) scale(1.1);
            }
          }
        }

        & > p {
          width: 7.25rem;
          height: 7.5rem;
          background-color: #223ad6;
          display: flex;
          flex-direction: column;

          & > i {
            width: 0.3625rem;
            height: 0.0875rem;
            background-color: #fa622f;
            border-radius: 0.0875rem;
            margin: 0.1rem 0 0 0.625rem;
          }

          & > b {
            font-size: 0.4375rem;
            color: #fff;
            margin: 0.1rem 0 0 0.625rem;
          }

          & > span {
            width: 100%;
            height: 6.125rem;
            position: relative;
            overflow: hidden;
            display: block;

            & > img {
              min-width: 100%;
              min-height: 6.125rem;
              height: 6.125rem;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              transition: all .3s;
            }
          }
        }
      }
    }
  }

  & > .service {
    width: 17.5rem;
    margin: 0 auto 0.875rem;

    & > main {
      width: 100%;

      & > div:hover {
        & > span {
          & > img {
            transform: translate(-50%, -50%) scale(1.1);
          }
        }
      }

      & > div {
        width: 100%;
        height: 3.6875rem;
        border-bottom: 1px solid #c5c5c5;
        display: flex;
        align-items: center;
        padding-right: 0.25rem;

        & > p {
          flex: 1;
          display: flex;
          flex-direction: column;
          font-size: 0.25rem;

          & > span {
            font-size: 0.3125rem;
            font-weight: bold;
            margin-bottom: 0.375rem;
          }
        }

        & > span {
          width: 3.95rem;
          height: 2.6875rem;
          position: relative;
          overflow: hidden;
          margin-right: 0.375rem;

          & > img {
            min-width: 100%;
            min-height: 2.6875rem;
            height: 2.6875rem;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s;
          }
        }
      }
    }
  }

  & > .product {
    width: 17.5rem;
    margin: 0 auto 0.875rem;

    & > main {
      margin-bottom: 0.875rem;
      display: flex;
      flex-wrap: wrap;

      & > div:nth-child(4n) {
        margin: 0 0rem 0.625rem 0;
      }

      & > div:hover {
        & > span {
          & > img {
            transform: translate(-50%, -50%) scale(1.1);
          }
        }
      }

      & > div {
        width: 3.75rem;
        height: 4.375rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        margin: 0 0.825rem 0.625rem 0;

        & > p {
          font-size: 0.25rem;
          margin: 0.225rem 0.05rem 0;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box !important;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        & > span {
          width: 100%;
          height: 2.8125rem;
          position: relative;
          overflow: hidden;

          & > img {
            min-width: 100%;
            min-height: 2.8125rem;
            height: 2.8125rem;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: all 0.3s;
          }
        }
      }
    }
  }

  & > .promise {
    width: 100%;
    margin: 0 auto 0.875rem;

    & > div {
      width: 100%;
      height: 7rem;
      background: url("../assets/home/20.png") no-repeat 50% 50%;
      background-size: 100%;

      & > main {
        width: 17.5rem;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        & > p {
          width: 3rem;
          height: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          font-size: 0.25rem;
          color: #fff;
          text-align: center;

          & > i {
            width: 100%;
            height: 0;
          }

          & > .two {
            width: 2.25rem;
            height: 2.25rem;
          }

          & > .three {
            width: 1.875rem;
            height: 1.875rem;
          }

          & > span {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            border: 1px solid #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.7rem;

            & > img {
              width: 0.675rem;
            }
          }
        }
      }
    }
  }

  & > .aboutUs {
    width: 17.5rem;
    margin: 0 auto 0.875rem;

    & > div {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.875rem;

      & > p:hover {
        & > img {
          transform: translate(-50%, -50%) scale(1.1);
        }
      }

      & > p {
        width: 5rem;
        height: 3.75rem;
        position: relative;
        overflow: hidden;

        & > img {
          min-width: 5rem;
          min-height: 3.75rem;
          height: 3.75rem;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          transition: all 0.3s;
        }
      }
    }

    & > p {
      font-size: 0.25rem;
      color: #666666;
      text-indent: 0.5rem;
      margin-bottom: 0.875rem;
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box !important;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }

  & > .headline {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    font-size: 0.4375rem;
    margin: 1.25rem 0;
    font-weight: bold;

    span {
      width: 1.25rem;
      height: 0.0625rem;
      border-radius: 0.0625rem;
      background: #17278d;
    }
  }

  .first-item {
    position: relative;

    & > .p_gradual {
      animation: gradual 0.8s linear 0s 1;
    }

    & > p {
      text-align: center;
      max-width: 70%;
      font-size: 1rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-weight: bold;
    }

    & > img {
      min-width: 100%;
      height: 100%;
    }
  }

  .first-item,
  .first-el-carousel-item,
  .first-el-carousel {
    width: 100%;
    height: 11rem;
  }
}

@media screen and (max-width: 768px) {
  .home {
    .Domlist {
      & > h3 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
      }

      & > button {
        width: 8rem;
        height: 2.5rem;
        border-radius: 1.25rem;
        font-size: 1.4rem;
      }
    }

    & > .qualification {
      width: 33.5rem;
      margin: 0 auto 4rem;

      & > img {
        width: 4rem;
      }

      & > div {
        width: 23rem;
      }

      .qualification-swiper,
      .qualification-swiper-item,
      .qualification-swiper-img {
        height: 18rem;
        background-color: #ffffff00;
      }
    }

    & > .journalism {
      width: 33.5rem;

      & > main {
        font-size: 1.2rem;
        margin-bottom: 2rem;

        & > div {
          padding: 0.5rem;
          & > p {
            & > span {
              width: 18rem;
            }

            & > i {
              width: 1rem;
              height: 1rem;
              margin-right: 1rem;
            }
          }
        }
      }
    }

    & > .college {
      & > p {
        height: 0.5rem;
        border-radius: 0.5rem;
        margin: 2rem auto 1rem;

        & > span {
          width: 2rem;
          border-radius: 0.5rem;
        }
      }

      .college-video {
        z-index: -90;
      }

      .college-video,
      .college-swiper,
      .college-swiper-item,
      .carousel-item {
        width: 33.5rem;
        height: 20rem;
      }
    }

    & > .innovate {
      width: 100%;

      & > main {
        width: 100%;
        height: 50rem;
        background: url("../assets/home/21.png") no-repeat 50% 50%;
        background-size: auto 100%;
        margin-bottom: 2rem;

        & > article {
          width: 33.5rem;

          & > div {
            height: 100%;
            justify-content: space-evenly;
            margin-right: 1rem;

            & > p:nth-child(1) {
              margin-top: 0rem;
            }

            & > p {
              margin-top: 0.5rem;

              & > span {
                font-size: 1.2rem;

                & > b {
                  font-size: 1.2rem;
                  margin-bottom: 0.5rem;
                }
              }

              & > img {
                width: 7rem;
                margin-right: 1rem;
              }
            }
          }
        }
      }
    }

    & > .service {
      width: 33.5rem;
      margin: 0 auto 2rem;

      & > main {
        & > div {
          height: 9rem;
          padding-right: 1rem;

          & > p {
            font-size: 1rem;

            & > span {
              font-size: 1.2rem;
              margin-bottom: 0.5rem;
            }
          }

          & > span {
            width: 9rem;
            height: 6rem;
            margin-right: 1rem;

            & > img {
              min-width: 100%;
              min-height: 6rem;
              height: 6rem;
            }
          }
        }
      }
    }

    & > .product {
      width: 33.5rem;
      margin: 0 auto 2rem;

      & > main {
        margin-bottom: 2rem;
        justify-content: space-between;

        & > div:nth-child(4n) {
          margin: 0 0 1rem 0;
        }

        & > div {
          width: 16rem;
          height: 18rem;
          margin: 0 0 1rem 0;

          & > p {
            font-size: 1.2rem;
            margin: 0.5rem 0.5rem 0;
          }

          & > span {
            width: 100%;
            height: 12rem;
            position: relative;
            overflow: hidden;

            & > img {
              min-width: 100%;
              min-height: 12rem;
              height: 12rem;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }

    & > .promise {
      margin: 0 auto 2rem;

      & > div {
        height: auto;
        background: #223ad6;

        & > main {
          width: 33.5rem;
          flex-direction: column;

          & > p {
            width: 100%;
            height: 5.5rem;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            font-size: 1.4rem;
            text-align: left;

            & > i {
              flex: 1;
              width: auto;
              height: auto;
            }

            & > .two {
              width: 3.5rem;
              height: 3.5rem;
            }

            & > .three {
              width: 3.5rem;
              height: 3.5rem;
            }

            & > span {
              width: 3.5rem;
              height: 3.5rem;
              margin-bottom: 0rem;
              margin-right: 2rem;

              & > img {
                width: 1.5rem;
              }
            }
          }
        }
      }
    }

    & > .aboutUs {
      width: 33.5rem;
      margin: 0 auto 2rem;

      & > div {
        margin-bottom: 2rem;

        & > p {
          width: 10rem;
          height: 7.5rem;

          & > img {
            min-width: 10rem;
            min-height: 7.5rem;
            height: 7.5rem;
          }
        }
      }

      & > p {
        font-size: 1.2rem;
        text-indent: 2.8rem;
        margin-bottom: 2rem;
      }
    }

    & > .headline {
      font-size: 1.8rem;
      margin: 2rem 0 2rem;

      span {
        width: 4rem;
        height: 0.3rem;
        border-radius: 0.3rem;
      }
    }

    .first-item {
      & > p {
        max-width: 80%;
        font-size: 2rem;
      }
    }

    .first-item,
    .first-el-carousel-item,
    .first-el-carousel {
      height: 22rem;
    }
  }
}
</style>